<template>
  <el-form>
    <el-row style="margin-top: 20px" :gutter="20">
      <el-col :span="6">
        <el-radio-group
          v-model="uiState.containerType"
          @change="onContainerTypeChange"
        >
          <el-radio-button
            v-for="(item, index) in uiState.type_list"
            :key="index"
            :disabled="readonly && !podSpec.initContainers"
            style="width: 50%"
            :label="item.label"
            :value="item.value"
          />
        </el-radio-group>
      </el-col>
      <el-col :span="14">
        <el-form-item>
          <el-select
            v-if="uiState.containerType === WorkloadEditContainerType.Standard"
            v-model="uiState.containerIndex"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in podSpec.containers"
              :key="index"
              :label="item.name"
              :value="index"
            />
          </el-select>
          <el-select
            v-if="uiState.containerType === WorkloadEditContainerType.Init"
            v-model="uiState.containerIndex"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in podSpec.initContainers"
              :key="index"
              :label="item.name"
              :value="index"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button-group>
          <el-button
            :disabled="readonly"
            icon="CirclePlusFilled"
            @click="onHandleAddContainer"
          />
          <el-button
            :disabled="readonly"
            icon="RemoveFilled"
            @click="onHandleDeleteContainer(uiState.containerIndex)"
          />
        </el-button-group>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { PodSpec } from "../../../api/k8s";
import { reactive } from "vue";
import { WorkloadEditContainerType } from "./types";

const { t } = useI18n();
type Prop = {
  readonly?: boolean;
};
const props = defineProps<Prop>();
const emit = defineEmits(["addContainer", "deleteContainer"]);
const podSpec = defineModel<PodSpec>("podSpec", {
  default: {}
});

const uiState = reactive({
  containerType: WorkloadEditContainerType.Standard,
  containerIndex: undefined as number | undefined,
  type_list: [
    {
      label: t("business.workload.initContainer"),
      value: WorkloadEditContainerType.Init
    },
    {
      label: t("business.workload.standardContainer"),
      value: WorkloadEditContainerType.Standard
    }
  ]
});

const onHandleAddContainer = () => {
  // if (uiState.containerType === WorkloadEditContainerType.Init) {
  //   podSpec.value.initContainers.push({
  //     name: "new-init-container"
  //   });
  // } else {
  //   podSpec.value.containers.push({
  //     name: "new-container"
  //   });
  // }

  emit("addContainer", uiState.containerType, { name: "new-container" });
};
const onHandleDeleteContainer = (index: number) => {
  // if (uiState.containerType === WorkloadEditContainerType.Init) {
  //   podSpec.value.initContainers.splice(index, 1);
  // } else {
  //   podSpec.value.containers.splice(index, 1);
  // }

  emit("deleteContainer", uiState.containerType);
};

const onContainerTypeChange = (type: WorkloadEditContainerType) => {
  uiState.containerType = type;
  switch (type) {
    case WorkloadEditContainerType.Init:
      uiState.containerIndex =
        podSpec.value?.initContainers?.length > 0 ? 0 : undefined;
      break;
    case WorkloadEditContainerType.Standard:
      uiState.containerIndex =
        podSpec.value?.containers?.length > 0 ? 0 : undefined;
      break;
    default:
      uiState.containerIndex = undefined;
  }
};
</script>
